<template>
  <!--面包屑-->
    <el-row>
        <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item to="/">主页</el-breadcrumb-item>
                <el-breadcrumb-item to="/wisdomeat">智慧食堂</el-breadcrumb-item>
                <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
                <el-breadcrumb-item>菜品审核</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </el-row>
  <!--    数据表格-->
    <el-row>
        <el-table :data="applicationList" stripe border style="width: 99%">
            <el-table-column type="index" label="序号" align="center" width="60px"/>
            <el-table-column prop="daDNumber" label="菜品编号" align="center"/>
            <el-table-column prop="dname" label="菜品名称" align="center"/>
            <el-table-column prop="bnumber" label="商家编号" align="center"/>
            <el-table-column prop="bname" label="申请商家" align="center"/>
            <el-table-column prop="ename" label="审核状态" align="center">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.daExamineId===3">{{scope.row.ename}}</el-tag>
                    <el-tag type="primary" v-if="scope.row.daExamineId===1">{{scope.row.ename}}</el-tag>
                    <el-tag type="success" v-if="scope.row.daExamineId===2">{{scope.row.ename}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="daTime" label="申请时间" align="center" :formatter="FormatTime"/>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="text" @click="btnCheckClick(scope.row)">详情</el-button>
                    <el-button type="text" @click="btnAgreeClick(scope.row)">同意</el-button>
                    <el-button type="text" @click="btnRefuseClick(scope.row)">拒绝</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        逻辑分页-->
        <el-config-provider>
            <el-pagination
                    :current-page="page.currentPage"
                    :page-size="page.pageSize"
                    background
                    layout="total, prev, pager, next,jumper"
                    :total="page.totalCount"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </el-config-provider>
    </el-row>
    <!--    商家详情弹窗-->
    <el-dialog v-model="dishesDetail.show">
        <template #header>
            <span style="font-size: 20px;font-weight: bold">菜品详情</span>
        </template>
        <el-col :span="24">
            <el-row :gutter="10">
                <el-col :span="12">
                    <div>
                        <img :src="dishesDetail.dPhoto" alt="" style="width: 280px;height: 280px"/>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="dialog-style">菜品名称：{{ dishesDetail.dName }}</div>
                    <div class="dialog-style">菜品价格：￥{{ dishesDetail.dPrice }}</div>
                    <div class="dialog-style">菜品重量：{{ dishesDetail.dWeight }}</div>
                    <div class="dialog-style">菜品类型：{{ dishesDetail.dtName }}</div>
                    <div class="dialog-style">菜品商家：{{ dishesDetail.bName }}</div>
                    <div class="dialog-style">商家编号：{{ dishesDetail.bNumber }}</div>
                </el-col>
            </el-row>
        </el-col>
    </el-dialog>
</template>

<script>
import axios from "axios";
import moment from "moment";
import {ElMessage} from "element-plus";

export default {
    name: "Dishes",
    data(){
        return{
            applicationList:[], //申请列表
            name:'', //管理员姓名
            dishesDetail:{
                show:false,
                dPhoto:'',
                dName:'',
                dPrice:0.00,
                dWeight:'',
                dtName:'',
                bName:'',
                bNumber:''
            },//商家详情
            page: {
                currentPage: 1, //当前页码，初始页码为1
                totalCount: 2, //总数居条数，根据接口获取数据长度
                pageSize: 5, //每页显示的条数
                allTableData: [] //全部表格数据
            },
        }
    },
    methods:{
        //获取菜品申请列表
        initTable(){
            this.name=sessionStorage.getItem('name');
            if(this.name==null){ //判断是否登录
                ElMessage.error({
                    message:'未找到用户信息，请先登录',
                    duration:1000
                });
            }else{
                axios({
                    url: 'http://localhost:8888/dishes/selectDishesApplication',
                    method: 'get',
                }).then((res) => {
                    this.page.allTableData = res.data.data;
                    this.page.totalCount = res.data.total;
                    this.handleCurrentChange(1)
                })
            }
        },
        //查看详情，将行的值赋给dishesDetail
        btnCheckClick(row){
            this.dishesDetail.show=true;
            this.dishesDetail.dPhoto=row.dphoto;
            this.dishesDetail.dName=row.dname;
            this.dishesDetail.dPrice=row.dprice;
            this.dishesDetail.dWeight=row.dweight;
            this.dishesDetail.dtName=row.dtName;
            this.dishesDetail.bName=row.bname;
            this.dishesDetail.bNumber=row.bnumber;
        },
        //同意申请
        btnAgreeClick(row){
            axios({
                url: 'http://localhost:8888/dishes/applyDishesApplication',
                method: 'post',
                params:{
                    id:row.id,
                    dNumber:row.daDNumber
                }
            }).then((res) => {
                if(res.data.success){
                    ElMessage.success({
                        message:'成功同意',
                        duration:1000
                    })
                    this.initTable();
                }
            })
        },
        //拒绝申请
        btnRefuseClick(row){
            axios({
                url: 'http://localhost:8888/dishes/refuseDishesApplication',
                method: 'post',
                params:{
                    id:row.id,
                    dNumber:row.daDNumber
                }
            }).then((res) => {
                if(res.data.success){
                    ElMessage.success({
                        message:'成功拒绝',
                        duration:1000
                    })
                    this.initTable();
                }
            })
        },
        //每页显示的条数
        handleSizeChange(pageSize) {
            this.page.pageSize = pageSize //改变每页显示的条数
            this.page.currentPage = 1 //每次变换单页条数后，将页面切换至第一页
            this.handleSizeChange(1) //获取第一页数据
        },
        //显示当前页数据
        handleCurrentChange(currentPage) {
            this.page.currentPage = currentPage //更新当前页数据
            const pageSize = this.page.pageSize //每页数据量
            this.applicationList = [] //清空表绑定的数据
            //获取当前页数据范围：（当前页-1）*每页数据-当前页*每页数据
            this.applicationList = this.page.allTableData.slice((((currentPage - 1) * pageSize)), (currentPage * pageSize))
        },
        //规定时间形式
        FormatTime(row, column) {
            var date = row[column.property];
            return moment(date).format("YYYY-MM-DD HH:mm:ss");
        }
    },
    mounted() {
        this.initTable();
    }
}
</script>

<style scoped>
.breadcrumb {
    padding: 10px;
}

.dialog-style {
    margin: 20px;
    color: #000;
    font-size: 18px
}
</style>